import styled from "styled-components";

export const Container = styled.div`
  border-radius: 15px;
  width: 100%;
  height: 40px;
  border: 1px solid #d0d0d0;

  &.small {
    height: 30px;
  }

  &.normal {
    height: 40px;
  }

  &.large {
    height: 50px;
  }
`
export const Icon = styled.div`
  &.small {
    width: 30px;
  }

  &.normal {
    width: 40px;
  }

  &.large {
    width: 50px;
  }

  height: 100%;
  float: left;
  width: 40px;

  &.isUsual {
    width: 0px;
  }
`
export const Input = styled.input`
  ::-webkit-input-placeholder {
    color: #999;
    font-size: 10px;
  }
  padding: 0 5px;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  cursor: text;
  outline: none;
  border: none;
  height: 100%;
  color: #b9b9b9;
  border-radius: 15px;
  &.isUsual {
    width: 100%;
  }
  &.EndIcon {
    &.small {
      width: calc(100% - 60px);
    }

    &.normal {
      width: calc(100% - 80px);
    }

    &.large {
      width: calc(100% - 100px);
    }
  }

  &.small {
    width: calc(100% - 30px);
  }

  &.normal {
    width: calc(100% - 40px);
  }

  &.large {
    width: calc(100% - 50px);
  }
`

export const More = styled.div`
  width: 0px;

  &.EndIcon {
    &.small {
      width: 30px;
    }

    &.normal {
      width: 40px;
    }

    &.large {
      width: 50px;
    }
  }

  height: 100%;
  float: right;

`

